<template>
	<view class='news acea-row row-between-wrapper'>
		<view class='pictrue'>
			<image :src='img'></image>
		</view>
		<view class='swiperTxt'>
			<swiper :indicator-dots="false" :autoplay="true" interval="2500" 
				vertical="true" circular="true">
				<block v-for="(item,index) in itemNew" :key='index'>
					<swiper-item catchtouchmove='catchTouchMove'>
						<view class='acea-row row-between-wrapper' hover-class='none'>
							<view class='text acea-row row-between-wrapper'>
								<view class='newsTitle'>{{item.chiild[0].val}}</view>
							 </view> 
							<view class='iconfont icon-xiangyou'></view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'd_news',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				img: this.dataConfig.imgUrl.url,
				itemNew: []
			};
		},
		created() {
			if (this.dataConfig.newList) {
				this.itemNew = this.dataConfig.newList.list;
			}
		},
		mounted() {},
		methods: {

		}
	}
</script>

<style lang="scss">
	.news {
		height: 77rpx;
		border-top: 1rpx solid #f4f4f4;
		padding: 0 30rpx;
		box-shadow: 0 10rpx 30rpx #f5f5f5;
		width: 750rpx;
		display: flex;
		align-items: center;
		background-color: white;
		&.default {
			text-align: center;
			line-height: 77rpx;
		}
	}

	.news .pictrue {
		width: 124rpx;
		height: 28rpx;
		border-right: 1rpx solid #ddd;
		padding-right: 23rpx;
		box-sizing: content-box;
		margin-left: 30rpx;
		flex:1;
	}

	.news .pictrue image {
		width: 100%;
		height: 100%;
	}

	.news .swiperTxt {
		width: 523rpx;
		height: 100%;
		line-height: 77rpx;
		overflow: hidden;
	}

	.news .swiperTxt .text {
		width: 480rpx;
	}

	.news .swiperTxt .text .label {
		font-size: 20rpx;
		color: #ff4c48;
		width: 64rpx;
		height: 30rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 28rpx;
		border: 2rpx solid #ff4947;
	}

	.news .swiperTxt .text .newsTitle {
		width: 397rpx;
		font-size: 24rpx;
		color: #666;
		margin-left: 20rpx;
	}

	.news .swiperTxt .iconfont {
		font-size: 28rpx;
		color: #888;
	}

	.news .swiperTxt swiper {
		height: 100%;
	}
</style>
